<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue';

// 定义 props
const props = defineProps<{
	article: {
		createTime: string;
		id: number;
		thumbnail: string;
		title: string;
		viewCount: number;
		summary: string;
	};
}>();
const emit = defineEmits(['articleId']);
function getArticleDetail() {
	emit('articleId', props.article.id);
}
</script>

<template>
	<div class="landscape-card-container" @click="getArticleDetail()">
		<div class="img">
			<img :src="article.thumbnail" alt="文章缩略图" class="thumbnail" />
		</div>
		<div class="content">
			<div class="title-view">
				<!-- <el-tooltip
					class="box-item"
					effect="dark"
					:content="article.title"
					placement="top"
				> -->
				<h2 class="title">{{ article.title }}</h2>
				<!-- </el-tooltip> -->
				<p class="summary">{{ article.summary }}</p>
			</div>
			<div class="details">
				<p class="view-count">浏览次数: {{ article.viewCount }}</p>
				<p class="create-time">
					创建时间:
					{{ new Date(article.createTime).toLocaleString() }}
				</p>
			</div>
		</div>
		<button class="read-more" @click="getArticleDetail()">查看详情</button>
	</div>
</template>

<style lang="less" scoped>
.landscape-card-container {
	display: flex; /* 使用 flexbox 进行横向布局 */
	flex-direction: row; /* 横向排列 */
	justify-content: space-between;
	align-items: flex-start; /* 顶部对齐 */
	width: 100%; /* 适应父容器宽度 */
	height: auto; /* 自适应高度 */
	overflow: hidden;
	border-radius: 15px;
	padding: 20px;
	text-align: left;
	transition: all 0.5s ease;
	cursor: pointer;
	z-index: 3;

	background: linear-gradient(
		135deg,
		#b0bdf0,
		#ffffff
	); /* 添加浅蓝到白色的渐变背景 */
	color: #0f3460; /* 设置文字颜色为深蓝色 */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
}

.img {
	width: 30%; /* 设置图片占比 */
	max-width: 200px;
	height: auto;
	.thumbnail {
		width: 100%; /* 约束图片宽度 */
		max-width: 150px; /* 设置图片最大宽度 */
		max-height: 150px; /* 设置图片最大高度 */
		border-radius: 10px;
		object-fit: cover; /* 保持图片比例，裁剪多余部分 */
	}
}

.content {
	width: 70%; /* 设置内容占比 */
	height: 100%;
	padding: 0 20px;
	display: flex;
	flex-direction: column; /* 垂直排列内容 */
}

.title-view {
	display: flex;
	flex-direction: column; /* 垂直排列标题和浏览次数 */
}

.title {
	font-size: 20px;
	color: var(--theme-text);
	margin: 5px 0;
}

.summary {
	font-size: 14px;
	color: var(--theme-text);
	margin: 5px 0;
}

.view-count,
.create-time {
	color: var(--theme-color);
	font-size: 1rem;
	margin: 5px 0;
}

.details {
	flex: 1;
	margin-top: 10px; /* 添加间距 */
	display: flex;

	// align-self: start;
	align-items: end;
	justify-content: space-between;
}

.read-more {
	height: 140px;
	// background-color: #fbdba4;
	color: #409eff;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	writing-mode: vertical-rl; /* 文字纵向显示 */
	transform: rotate(0deg); /* 旋转文字方向 */
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影效果 */
	letter-spacing: 4px; /* 增大字间距 */
	font-size: 1.4rem;
	transition: all 0.3s;
}

.read-more:hover {
	// background-color: var(--theme-hover);
	transform: scale(1.2); /* 放大 1.5 倍 */
}
</style>
